<template>
    <view class="content">
        <view class="components">
            <view class="components-item" v-for="item in components" :key="item.name + item.path" @tap="handleItemClick(item)">
                <pure-cell :icon="item.icon" :title="item.name" :desc="item.desc" arrow></pure-cell>
            </view>
        </view>
    </view>
</template>

<script setup>
    import { ref } from "vue";

    // 组件列表
    const components = ref([
        { name: "图标", desc: "Icon", path: "/pages/icon", icon: "/static/icons/icon.png" },
        { name: "加载", desc: "Loading", path: "/pages/loading", icon: "/static/icons/loading.png" },
        { name: "按钮", desc: "Button", path: "/pages/button", icon: "/static/icons/button.png" },
        { name: "单元格", desc: "Cell", path: "/pages/cell", icon: "/static/icons/cell.png" },
        { name: "空内容", desc: "Empty", path: "/pages/empty", icon: "/static/icons/empty.png" },
        { name: "加载更多", desc: "LoadMore", path: "/pages/loadmore", icon: "/static/icons/loading.png" },
        { name: "块元素", desc: "Block", path: "/pages/block", icon: "/static/icons/block.png" },
        { name: "图片", desc: "Image", path: "/pages/image", icon: "/static/icons/image.png" },
        { name: "徽标", desc: "Badge", path: "/pages/badge", icon: "/static/icons/badge.png" },
        { name: "标签", desc: "Tag", path: "/pages/tag", icon: "/static/icons/tag.png" },
        { name: "间隔", desc: "Gap", path: "/pages/gap", icon: "/static/icons/gap.png" },
        { name: "标签、选项卡", desc: "Tabs", path: "/pages/tabs", icon: "/static/icons/tabs.png" },
        { name: "电梯导航、联动菜单", desc: "Elevator", path: "/pages/elevator/index", icon: "/static/icons/elevator.png" },
        { name: "瀑布流", desc: "Waterfall", path: "/pages/waterfall", icon: "/static/icons/waterfall.png" },
        { name: "单选框", desc: "Radio", path: "/pages/radio", icon: "/static/icons/radio.png" },
        { name: "多选框", desc: "Checkbox", path: "/pages/checkbox", icon: "/static/icons/checkbox.png" },
        { name: "开关选择器", desc: "Switch", path: "/pages/switch", icon: "/static/icons/switch.png" },
        { name: "遮罩层", desc: "Overlay", path: "/pages/overlay", icon: "/static/icons/overlay.png" },
        { name: "弹出层", desc: "Popup", path: "/pages/popup", icon: "/static/icons/popup.png" },
        { name: "对话框", desc: "Modal", path: "/pages/modal", icon: "/static/icons/modal.png" },
        { name: "滚动通知", desc: "NoticeBar", path: "/pages/notice-bar", icon: "/static/icons/notice-bar.png" },
        { name: "导航栏", desc: "NavBar", path: "/pages/navbar", icon: "/static/icons/navbar.png" },
        { name: "标签栏", desc: "Tabbar", path: "/pages/tabbar", icon: "/static/icons/tabbar.png" },
        { name: "超链接", desc: "Link", path: "/pages/link", icon: "/static/icons/link.png" },
        { name: "日历", desc: "Calendar", path: "/pages/calendar", icon: "/static/icons/calendar.png" },
        { name: "级联选择器", desc: "Cascader", path: "/pages/cascader", icon: "/static/icons/cascader.png" },
        { name: "字段", desc: "Field", path: "/pages/field", icon: "/static/icons/field.png" },
        { name: "表单", desc: "Form", path: "/pages/form", icon: "/static/icons/form.png" },
        { name: "输入框", desc: "Input", path: "/pages/input", icon: "/static/icons/input.png" },
        { name: "轮播", desc: "Swiper", path: "/pages/swiper", icon: "/static/icons/swiper.png" },
        { name: "指示器", desc: "Indicator", path: "/pages/indicator", icon: "/static/icons/indicator.png" },
        { name: "左/右切换器", desc: "PrevNext", path: "/pages/prev-next", icon: "/static/icons/prev-next.png" },
        { name: "步进器", desc: "Stepper", path: "/pages/stepper", icon: "/static/icons/stepper.png" },
        { name: "布局", desc: "Layout", path: "/pages/layout", icon: "/static/icons/layout.png" },
        { name: "验证码倒计时", desc: "CodeCountdown", path: "/pages/code-countdown", icon: "/static/icons/code-countdown.png" },
        { name: "验证码输入框", desc: "CodeInput", path: "/pages/code-input", icon: "/static/icons/code-input.png" },
        { name: "金额", desc: "Amount", path: "/pages/amount", icon: "/static/icons/amount.png" },
        { name: "头像", desc: "Avatar", path: "/pages/avatar", icon: "/static/icons/avatar.png" },
        { name: "搜索", desc: "Search", path: "/pages/search", icon: "/static/icons/search.png" },
        { name: "多行输入框", desc: "Textarea", path: "/pages/textarea", icon: "/static/icons/textarea.png" },
        { name: "关联选择器", desc: "RelationSelect", path: "/pages/relation-select", icon: "/static/icons/relation-select.png" },
        { name: "列表", desc: "List", path: "/pages/list", icon: "/static/icons/list.png" },
    ]);

    // 点击事件
    // item: 组件列表项数据
    function handleItemClick(item) {
        uni.navigateTo({
            url: item.path,
        });
    }
</script>

<style scoped>
    .components {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .components-item {
        border-radius: 6px;
        overflow: hidden;
    }

    .components-item-icon {
        flex-shrink: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 20px;
    }

    .components-item-name {
        flex: 1;
        padding: 0 12px;
        font-weight: bold;
    }

    .components-item-arrow {
        flex-shrink: 0;
        color: #888888;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
</style>
